<!-- 去旅行页面 景点价格 -->
<template>
  <div class="box">
    <div>
      <header class="scenic-header-box">
        <h2 class="scenic-title">
          <a href="#">{{scenicPriceList.scenicTitle}}</a>
          <span class="scenic-ishot" v-show="scenicPriceList.ishot">大家都在买</span>
        </h2>
        <span class="change-btn" @click="changeItem()">
          <i class="el-icon-refresh" style="font-size:16px;margin-right:2px"></i>
          <span class="change-text">换一换</span>
        </span>
      </header>
      <ul class="scenic-list">
        <li class="scenic-item" v-for="(item2,index2) in scenicPriceList.scenicList.slice(start,end)">
          <a href="#" class="scenic-item-link">
            <img class="scenic-item-link-img" :src="item2.scenicImg" width="238px" height="134px" />
            <div class="inf-box">
              <p class="scenic-item-link-inf" :title="item2.scenicInf">{{item2.scenicInf}}</p>
              <div class="scenic-item-link-bot">
                <span style="color:#ff8a00;font-size:22px" class="scenic-item-link-money-box">
                  <b>￥{{item2.scenicPrice}}</b>
                  <span style="font-size:14px">起</span>
                </span>
                <span class="scenic-item-link-shop">店铺:{{item2.scenicShop}}</span>
              </div>
            </div>
          </a>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
// import {mapState} from 'vuex'
export default {
  props: ["data"],
  data() {
    return {
      scenicPriceList: this.data,
      start: 0,
      end: 4
    };
  },

  components: {},

  computed: {
    // ...mapState(['scenicPriceList'])
  },
  mounted() {
  },
  methods: {
    changeItem(){
        if(this.start==0&&this.end==4){
            this.start =4,
            this.end =8
        }else{
            this.start = 0
            this.end =4
        }
    }
  }
};
</script>
<style scoped lang="stylus" ref="stylesheet/stylus">
.box {
  width: 1000px;
  margin: 15px auto;

  // border 1px solid red
  .scenic-header-box {
    border-bottom: 1px solid #f1f1f1;
    color: #999999;
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
    padding: 10px 0;

    .scenic-title {
      color: scenic-title;
      font-weight: normal;
      font-size: 24px;
      color: #fb6720;

      .scenic-ishot {
        color: #999999;
        font-size: 14px;
        margin-left: 10px;
      }
    }

    .change-btn {
      font-size: 12px;
      display: flex;
      align-items: center;

      &:hover {
        cursor: pointer;

        .change-text {
          text-decoration: underline;
        }
      }
    }
  }

  .scenic-list {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .scenic-item {
      display: flex;

      .scenic-item-link {
        width: 238px;

        .inf-box {
          font-size: 14px;
          border: 1px solid #efefef;
          margin-top: -5px;

          &:hover {
            background-color: #efefef;

            .scenic-item-link-inf {
              height: 80px;
              margin-top: -42px;
              transition: all 0.3s;
              z-index: 10;
              position: relative;
              background-color: #efefef;
            }
          }

          .scenic-item-link-inf {
            height: 38px;
            overflow: hidden;
            padding: 5px 10px 0 10px;
            z-index: 10;
            position: relative;
            transition: all 0.3s;
            background-color: #f6f6f6;
          }

          .scenic-item-link-bot {
            padding: 10px 15px;
            display: flex;
            justify-content: space-between;
            align-items: center;

            .scenic-item-link-shop {
              font-size: 12px;
              color: #666666;
            }
          }
        }
      }
    }
  }
}
</style>